import React, { useRef, useEffect, useState } from 'react';
import { Button } from 'antd';
import classNames from 'classnames';
import styles from './BpmnSample.less';

// 这个viewer只是看的
// import BpmnViewer from 'bpmn-js';

// 引入建模的依赖
import BpmnJSModeler from 'bpmn-js/lib/Modeler';

// 添加了右侧的属性面板  type: camunda
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda';

// 添加了右侧的属性面板  type: bpmn
// import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/bpmn';

function BpnmSample(props) {
  const containerRef = useRef();
  const [bpmnjsModeler, setBpmnjsModeler] = useState(null);

  useEffect(() => {
    let bpmnJSModeler = new BpmnJSModeler({
      additionalModules: [propertiesPanelModule, propertiesProviderModule],
      container: containerRef.current,
      propertiesPanel: {
        parent: '#js-properties-panel',
      },
      moddleExtensions: {
        camunda: camundaModdleDescriptor,
      },
    });

    setBpmnjsModeler(bpmnJSModeler);

    // 创建新的图
    bpmnJSModeler.createDiagram();

    bpmnJSModeler.on('selection.changed', (e) => {
      if (e.newSelection.length > 0) {
        console.log(e.newSelection[0]);
      }
    });
  }, []);

  return (
    <div className={styles.mainBiz}>
      <div className={styles.bizBlock}>
        <Button>导出XML</Button>
        <Button>打印</Button>
        <Button>Read</Button>
      </div>
      <div className={classNames(styles.bizBlock, styles.bpmnCanvas)} ref={containerRef} />
      <div className={styles.panelWrapper}>
        <div id="js-properties-panel" className={styles.propertiesPanel} />
      </div>
    </div>
  );
}

export default BpnmSample;
